<!-- 宿舍信息 -->
<template>
  <div class="RoomInfo-container">
    <Loading v-if="props.Loading"></Loading>
    <div class="room" v-else>
      <div>
        <p class="title">入住人员信息</p>
        <Carousel :num="props.roomInfo.movingInStudents.length">
          <ul class="carousel-list">
            <li
              class="carousel-item"
              v-for="item in props.roomInfo.movingInStudents"
              :key="item.id"
            >
              <div class="avatar">
                <Avatar :url="item.avatar" :size="60"></Avatar>
              </div>
              <div class="basicInfo">
                <p>姓名: {{ item.studentName }}</p>
                <p class="rigth">
                  学号:
                  {{ item.studentID }}
                </p>
                <p>床位: {{ item.studentBed }}</p>
                <p class="rigth">
                  入住:
                  {{ moment(item.studentCheckInTime).format("YYYY-MM-DD") }}
                </p>
              </div>
            </li>
          </ul>
        </Carousel>
      </div>
      <p class="title">楼层信息</p>
      <div class="other">
        <p class="capacity">
          <span>宿舍号</span>: {{ props.roomInfo.roomNo }}
        </p>
        <p class="resided">
          <span>以住人数</span>: {{ props.roomInfo.roomResided }}人
        </p>
        <p class="floorNum"><span>可住人数</span>: {{ props.roomCapacity }}人</p>
      </div>
    </div>
    
  </div>
</template>

<script setup>
import Carousel from "@/components/Carousel/index.vue";
import Avatar from "@/components/Avatar/index.vue";
import Loading from "@/components/Loading/index.vue"
import moment from "moment";
const props = defineProps({
  roomInfo: {
    type: Object,
    required: true,
  },
  Loading:{
    type:Boolean,
    default:false
  }
});


</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.RoomInfo-container {
  width: 100%;
  height: 100%;
  font-size: 14px;
  position: relative;
  .room {
    p {
      color: @gray;
      margin: 5px 0;
      padding: 0 5px;
      span {
        display: inline-block;
        width: 80px;
        text-align-last: justify;
      }
    }
    .title {
      text-align: center;
      font-size: 24px;
      margin-bottom: 10px;
    }
    .avatar {
      margin-bottom: 10px;
      .avatar-container {
        margin: 0 auto;
      }
    }
    .basicInfo {
      width: 80%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      p {
        width: 50%;
        &.rigth {
          text-align: right;
        }
      }
    }
    .other {
      padding: 0 5px;
    }
  }
}
.carousel-list {
  display: flex;
  height: 150px;
  .carousel-item {
    width: 100%;
    height: 150px;
    flex-shrink: 0;
    flex-grow: 1;
  }
}
</style>